//弹出框
$(function () {
    $('.div').mouseover(function () {
        $('#Ying').show()
        $('.span').css({

            'transform': 'rotate(180deg)'
        })
    })
    $('#Ying').mouseout(function () {
        $('#Ying').hide()
        $('.span').css({

            'transform': 'rotate(360deg)'
        })

    })
})

//划过出现下划线
$(function () {
    $('#nav li').mouseover(function () {

        $(this).css({
            borderBottom: '4px solid yellow',
            color: 'white',

        })
    })
    $('#nav li').mouseout(function () {

        $(this).css({
            border: 'none',
            color: 'rgb(170, 170, 170)',

        })

    })


})

$(".cart").click(function () {
    location.href = '../html/mycar.html'
})
$('#shop-car').click(function () {
    location.href = '../html/mycar.html'
})

//商品滑过阴影效果
$(".shadow").hover(function () {
    $(this).animate({
        top: '-5'
    }, '2000', "linear", function () {
        $(this).css({
            boxShadow: ' 0 5px 10px 0px rgb(150,150,150) '
        })
    });

}, function () {
    $(this).animate({
        top: 0
    }, 500, 'linear', function () {
        $(this).css({
            boxShadow: '0 0 0 0'
        })
    })
});

let user = localStorage.getItem('uid')
if (user) {
    $('#login').html('♻' + user)
    $('#login').hover(function () {
        $('#login').html('退出登录')
    }, function () {
        $('#login').html('♻' + user)
    })
}

$('#login').click(function () {
    localStorage.removeItem('uid')
    // console.log($('#login').html());
    if ($('#login').html() == '退出登录') {
        location.reload()
    }

})

//滚动条
window.onscroll = function () {
    let h = document.documentElement.scrollTop
    // console.log(h);
    if (h > 400) {
        $('#top').css({
            position: 'sticky',
            top: 0,
            zIndex: ' 5555',
            display: 'block'
        })

    } else {

        $('#top').css({
            position: 'relative',
            top: ' 0',
            zIndex: ' 5555',
        })
    }
};
//返回底部  上部
$('.slide_top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 400); });
$('.glyphicon-download').click(function () { $('html,body').animate({ scrollTop: '2500px' }, 400); });
$('#aside>div').hover(function () {
    $(this).find('section').show()
}, function () {
    $(this).find('section').hide()

})



$.get('http://localhost:3000/card', function (res) {
    // console.log(res[0].data);
    res.forEach(a => {
        // console.log(a.uid,user);
        if (a.uid == user) {
            console.log(a.data);
            let arr = JSON.parse(a.data)
            console.log(arr);
            $('.cart span').html(arr.length)
        }
    })
}, 'json')


//登录正则
var ipt = document.querySelectorAll('input')
var span = document.querySelectorAll('span')

var btn = ipt[3]
$('#login').click(function () {
    $('.kuang').show()
    console.log('登录');
})
$(function () {

    $('#nav li').mouseout(function () {

        $(this).css({
            border: 'none',
            color: 'rgb(170, 170, 170)',
        })
    })
})

//登录页注册  table切换
$(function () {
    $(".qq").each(function () {
        var index = $(this).index();
        // 初始化
        $(".qq").eq(0).addClass("active");
        $(this).click(function () {
            // 点击某个元素时，给这个元素添加active类，其余兄弟元素的active类都取消
            $(this).css({ 'background': '#31A4F6' }).addClass("active").siblings().removeClass("active").css({ 'background': '#F1F1F1' });
            $(".container>div").eq(index).stop(true).show().siblings().stop(true).hide();
        })
    })
})


//用户名获得焦点时
var reg1 = /^[\w]{6,18}$/;//用户名  6--18位数字,字母,下划线_

ipt[1].onfocus = function () {
    span[1].innerHTML = '请输入6--18位数字,字母,下划线_';
    span[1].style.color = 'green';
}

//用户名离开焦点时

ipt[1].onblur = function () {
    if (this.value == '') {
        span[1].innerHTML = '用户名不能为空！';
        span[1].style.color = 'red';
    } else if (!reg1.test(this.value)) {
        span[1].innerHTML = '请输入6--18位数字,字母,下划线_';
        span[1].style.color = 'red';
    } else {
        span[1].innerHTML = '格式正确!';
        span[1].style.color = 'green';
        return n1 = true;
    }
}
//密码获得焦点时
reg2 = /^[\W\da-zA-Z_]{6,20}$/;//密码  6--20位数字,字母,任意字符
ipt[2].onfocus = function () {
    span[2].innerHTML = '请输入6--20位数字,字母,任意字符';
    span[2].style.color = 'green';
}
//密码离开焦点时
ipt[2].onblur = function () {
    if (this.value == '') {
        span[2].innerHTML = '密码不能为空！';
        span[2].style.color = 'red';
    } else if (!reg2.test(this.value)) {
        span[2].innerHTML = '请输入6--20位数字,字母,任意字符';
        span[2].style.color = 'red';
    } else {
        span[2].innerHTML = '格式正确!';
        span[2].style.color = 'green';
        return n2 = true;
    }
}
//登录
btn.onclick = function () {
    let username = ipt[1].value
    let password = ipt[2].value
    axios.get('http://jx.xuzhixiang.top/ap/api/login.php', {
        params: {
            username,
            password
        }
    }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('uid', res.data.data.id)
            localStorage.setItem('username', username)
            alert('登录成功')
            $('.kuang').css({ 'display': 'none' })
            let user = localStorage.getItem('uid')
            console.log(user);
            if (user) {
                $.get('http://localhost:3000/card', function (res) {
                    // console.log(res[0].data);
                    res.forEach(a => {
                        // console.log(a.uid,user);
                        if (a.uid == user) {
                            console.log(a.data);
                            let arr = JSON.parse(a.data)
                            console.log(arr);
                            $('.cart span').html(arr.length)
                        }
                    })
                }, 'json')
                $('#login').html('♻' + user)
                $('#login').hover(function () {
                    $('#login').html('退出登录')
                }, function () {
                    $('#login').html('♻' + user)
                })
            }

            $('#login').click(function () {
                localStorage.removeItem('uid')
                console.log($('#login').html());
                if ($('#login').html() == '退出登录') {
                    location.reload()
                }

            })
            // if (user) {
            //    
            // }
        } else {
            alert('密码错误')
            location.reload()

        }
    })

}


$('.ca').click(function (event) {
    event.stopPropagation();
    $('.kuang').toggle();
    console.log('关闭');
})

//注册
// console.log(ipt);
ipt[6].onclick = function () {
    let username = ipt[4].value
    let password = ipt[5].value
    axios.get('http://jx.xuzhixiang.top/ap/api/reg.php', {
        params: {
            username,
            password
        }
    }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
            alert('注册成功')

            location.href = '../html/home.html'
        } else {
            alert('用户名已被占用')
            location.reload()
        }

    })
}








